<template>
	<view>
		<scroll-view class="list" scroll-y @scrolltolower="loadMore">
			<block v-for="(item,index) in PolicyHistory" :key="index">
				<view class="zcModel-card">
					<view class="zcModel-card-item uni-flex zcAlignI_center zcJustifyC_between">
						<view class="">
							<view class="uni-flex zcAlignI_center" style="width:75upx;margin-right: 8px;">
								<image v-if="item.InsureCompany" :src="imgPath+'UniImages/ZH_renbao.png'" mode="widthFix" style="width: 100%;"></image>
							</view>
							<view>{{item.InsureCompany}}</view>
						</view>
						<view style="color: #FFB46D;">{{item.InsureMoney?('￥'+item.InsureMoney):''}}</view>
					</view>
					<view class="zcModel-card-item uni-flex zcAlignI_center">
						<view>险种类别：</view>
						<view>{{item.InsureTypeCategory}}</view>
					</view>
					<view class="zcModel-card-item uni-flex zcAlignI_center">
						<view>保险有效期：</view>
						<view>{{item.InsureStartDate}}~{{item.InsureEndDate}}</view>
					</view>
				</view>
			</block>
		</scroll-view>
		<view class="uni-tab-bar-loading">
			{{loadingText}}
		</view>
		<view v-if="PolicyHistory.length < 1 && isNoDataShow" class="uni-tab-bar-loading" style="text-align: center;">
			<view class="no_model">
				<image :src="imgPath+'UniImages/no_data.png'" mode="widthFix" style="width: 100%;"></image>
				<view class="no_text">暂无数据</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	let _this;
	export default {
		data() {
			return {
				isNoDataShow:false,
				VehicleInfoSN:'',
				StartRow:0,	//	当前页数据开始下标
				dataLength:0,	//	当前页 数据返回个数
				loadingText:'',
				PolicyHistory:[],
				imgPath:this.$ZcPublic.Domain
			}
		},
		onLoad(e) {
			_this = this;
			
			if (e.VehicleInfoSN) {
				_this.VehicleInfoSN = e.VehicleInfoSN;
				_this.zcQueryInsurePolicyHistory4Vehicle();
			}else{
				_this.isNoDataShow = true;
			}
		},
		methods: {
			loadMore() {
				if (_this.dataLength < 20) {
					return;
				}
				_this.loadingText = '加载中';
				_this.zcQueryInsurePolicyHistory4Vehicle();
			},
			zcQueryInsurePolicyHistory4Vehicle() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'uni_Insure_Detail',
						Action: 'Ext_QueryInsurePolicyHistory4Vehicle',
						Data: {
							SN:_this.VehicleInfoSN,		//	车辆SN
							StartRow: 0,	//开始行（用于分页）
							RowCount: 20		//每页数量，默认为50
						}
					},
					Callback:function(resjson,scope) {
						if (resjson.state === 'back') {
							console.log('投保历史列表 = ',resjson.data);
							if (!resjson.success) {
								uni.showModal({
									title:'温馨提示',
									showCancel:false,
									content:''+resjson.msg
								})
								return;
							}
							
							if (resjson.data!==null && resjson.data.length > 0) {
								_this.StartRow = _this.StartRow + resjson.data.length;	// 初始化 下次加载开始下标
								_this.dataLength = resjson.data.length;
								if (_this.dataLength < 20) {
									if (_this.StartRow >= 20) {
										_this.loadingText = '没有更多了...';
									}else{
										_this.loadingText = '';
									}
								}else {
									_this.loadingText = '加载更多...';
								}
								
								for (let i = 0; i < resjson.data.length; i++) {
									_this.PolicyHistory.push(resjson.data[i]);
								}
							}else {
								_this.isNoDataShow = true;
							}
						}
                        if (resjson.state === 'end') {
                            uni.hideLoading();
                        }
						
					},
					Scope: this
				})
			}
		}
	}
</script>

<style>
	
	.zcModel-card{padding: 20upx 0;background-color: #FFFFFF;background: url(../../static/history_bg.png) no-repeat;background-size: 100% 100%;}
	.zcModel-card:first-child{margin-top: 20upx;}
	.zcModel-card-item{padding: 20upx;font-size: 30upx;margin: 0 60upx;}
	.zcModel-card-item:first-child{border-bottom: 2upx dashed #E5E5E5;padding: 30upx 20upx;}
	.zcModel-card-item view{display: flex;flex-shrink: 0;}
	.zcModel-card-item view:first-child{width: 32%;}
	.zcModel-card-item:nth-child(2) view:first-child{color: #999999;}
	.zcModel-card-item:nth-child(3) view:first-child{color: #999999;}
	
	/* 分页底部说明样式 */
	.uni-tab-bar-loading{text-align: center;margin: 0;}
	
	/* 无数据样式 */
	.no_model{position: relative;display: flex;flex-direction: column;align-items: center;padding: 0 160upx;padding-top: 100upx;}
	.no_text{font-size: 30upx;color: #999999;position: absolute;bottom: 28upx;}
</style>
